<!--
 * @Author: your name
 * @Date: 2020-12-08 17:33:40
 * @LastEditTime: 2020-12-30 20:38:44
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\warranty\extendedManagement\extendedManagement.vue
-->
<template>
    <div>
        <div class="search-box">
            <div class="search-box-sub">
                <span class="lable-text">{{$t('country')}}</span>
                <el-select v-model="enName" filterable :placeholder="$t('pleaseSelect')" clearable >
                    <el-option
                        v-for="item in nationList"
                        :key="item.enName"
                        :label="item.enName"
                        :value="item.enName">
                    </el-option>
                </el-select>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('warrantyNational')}}</span>
                <el-select v-model="region" filterable :placeholder="$t('pleaseSelect')" clearable >
                    <el-option
                        v-for="item in CountryList"
                        :key="item.code"
                        :label="item.code"
                        :value="item.code">
                    </el-option>
                </el-select>
            </div>
            <div class="search-box-sub">
                <el-button type="primary" @click='query'>{{$t('query')}}</el-button>
            </div>
            
        </div>
        <div class="button-box">
            <el-popconfirm
                    :confirm-button-text="$t('sure')"
                    :cancel-button-text="$t('cancel')"
            :title="$t('index.delete_confirm')+'?'"
            @confirm='delayCodeDeleteBatch()'
            >
                <el-button   type="primary" slot="reference"  icon='el-icon-delete' class="marginR10" >{{$t('delete')}}</el-button>
            </el-popconfirm>
        </div>
        <baseTable v-loading="loading"  row-key='sid' :data="dataRows" border  stripe :column='column' :select='true' @selection-change="handleSelectionChange($event)">
            <template #status='{data}'>
                <!-- {{comm.returnCode(statusList,data.status,'id','text')}} -->
            </template>
            <template #option='{data}'>
                <div class="option-box">
                    <el-button class="marginR10" type="danger" slot="reference" icon='el-icon-edit' :title="$t('edit')" @click='showEditModal(data)'></el-button>
                    <el-popconfirm
                            :confirm-button-text="$t('sure')"
                            :cancel-button-text="$t('cancel')"
                        :title="$t('index.delete_item_confirm')"
                        @confirm='deleteRow(data.sid)'
                    >
                        <el-button class="marginR10" type="danger" slot="reference" icon='el-icon-delete' :title="$t('delete')"></el-button>
                    </el-popconfirm>
                </div>
            </template>
        </baseTable>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
        <add @uploadData='query' :editModalData='editModalData' :nationList='nationList' :CountryList='CountryList'></add>
    </div>
</template>

<script>
import baseTable from '../../../components/common/baseTable'
import add from './add.vue'
export default {
    components: {
        baseTable,
        add,
    },
    props: {

    },
    data() {
        return {
            enName:'',
            region:'',
            paypalOrderId:'',
            dictionary:[],
            loading:false,
            dataRows:[],
            column:[{
                title: this.$t('warrantyNational.zname'),
                value: 'name',
                slot: 'name',
            },
            {
                title: this.$t('warrantyNational.ename'),
                value: 'enName',
                slot: 'enName',
            },
            {
                title: this.$t('timeZone'),
                value: 'timeZone',
                slot: 'timeZone',
            },
            {
                title: this.$t('warrantyNational'),
                value: 'region',
                slot: 'region',
            },{
                title: this.$t('warrantyManage.warranty_period'),
                value: 'delayTime',
                slot: 'delayTime',
            },
            {
                title: this.$t('control'),
                value: 'option',
                slot: 'option',
            }],
            size:10,
            current:1,
            total:1,
            nationList:[],
            selectDataList:[],
            CountryList:[],
            editModalData:{}
        };
    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.crmcountryGetRegionForCrmCountry()
        this.selectCountry()
        this.delayCodeGetPage()

    },
    methods: {
        showEditModal(data){
            this.editModalData = data
            this.$store.commit('setVisibleAdd',true)
        },
        async crmcountryGetRegionForCrmCountry(){
            let res = await this.API.crmcountryGetRegionForCrmCountry()
            this.CountryList = res.object
        },
        async selectCountry(){
            let res = await this.API.selectCountry()
            this.nationList = res
        },
        async deleteRow(id){
            let res = await this.API.crmcountryDeleteBatch({
                ids:id
            })
            if(this.comm.showMsg(res.success)){
                this.delayCodeGetPage()
            }
        },
        async delayCodeDeleteBatch(){
            if(this.selectDataList.length == 0){
                this.comm.showMsg(false,this.$t('index.delete_select'))
                return
            }
            let res= await this.API.crmcountryDeleteBatch({
                ids:this.selectDataList.map(item =>{
                    return item.sid
                })
            })

            if(this.comm.showMsg(res.success)){
                this.delayCodeGetPage()
            }
        },
        async delayCodeGetPage(){
            this.loading = true
            let res = await this.API.crmcountryGetPage({
                size: this.size,
                current: this.current,
                enName: this.enName,
                region: this.region,
            })
            this.loading = false
            this.dataRows = res.rows
            this.total = res.total
        },
        query(){
            this.current = 1
            this.delayCodeGetPage()
        },
        handleSizeChange(val) {
          this.size = val
          this.current = 1
          this.delayCodeGetPage()
        },
        handleCurrentChange(val) { 
          this.current = val
          this.delayCodeGetPage()
        },
        handleSelectionChange(val){
          this.selectDataList=val
        },
    },
};
</script>

<style  lang="less" scoped>

</style>
